<!DOCTYPE html>
<!-- saved from url=(0059)http://www.layui.com/admin/std/dist/views/home/console.html -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>主页</title>
    <meta name="renderer" content="webkit" />
    <link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all" />
    <!--<link rel="stylesheet" href="css/introduction.css" media="all" />-->
    <link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
    <style>
        .more-file{
            position: absolute;
            right:22.5px;
            height: 42px;
            width:28px;
            color:#01AAED;
            line-height: 42px;
            text-decoration: none;
            cursor: pointer;
            z-index: 10000;
        }
        body .demo-class .layui-layer-content{
            background:#ffffff;
        }
        .layui-form-checkbox[lay-skin=primary]{
            padding:5px;
        }
        #GH-map-layer{
            position: absolute;
            right: 20px;
            bottom: 15px;
            z-index: 2;
            background-color: #fff;
            overflow-x: auto;
        }

        #GH-map-ex{
            position: absolute !important;
            left: 20px;
            bottom: 15px;
            z-index: 2;
            background-color: #fff;
            max-height: 150px;
            overflow: auto;
            display: none;
        }

        #GH-map-ex::-webkit-scrollbar{
            display: none;
        }
    </style>
    <script type="text/javascript" src="../../js/jquery-2.2.3.min.js"></script>
    <script type="text/javascript" src="../../lib/layui/lay/modules/layer.js"></script>
    <!--<script type="text/javascript" src="echarts/echarts.js"></script>-->
    <script type="text/javascript" src="../../lib/layui/layui.js"></script>
    <script src="https://js.arcgis.com/3.46/init.js"></script>
    <script>
        var mapServer = {
            baseLay:"http://202.111.178.10:36080/arcgis/rest/services/BHQ/JL_15m/MapServer",
            //stlayer:"http://202.111.178.10:34576/arcgis/rest/services/KouAn/kouan_features/MapServer"
            stlayer:"http://202.111.178.10:61236/arcgis/rest/services/71KT5/HunchunFeatures/MapServer"
        };
        var map;
        var stlayer;
        var legend;
        require(["dojo/dom",
            "dojo/on",
            "esri/map",
            "esri/layers/ArcGISDynamicMapServiceLayer",
            "esri/layers/ArcGISTiledMapServiceLayer",
            "esri/geometry/Point",
            "esri/dijit/Legend",
            "dojo/domReady!"], function (
            dom,
            on,
            Map,
            ArcGISDynamicMapServiceLayer,
            ArcGISTiledMapServiceLayer,
            Point,
            Legend) {
            map = new Map("map",{logo:false,slider:false,backgroundColor:'#yellow'});
            var baseLay = new ArcGISTiledMapServiceLayer(mapServer.baseLay);
            map.addLayer(baseLay,0);
            map.on("load",function(){
                var point = new Point( {"x": 130.25, "y": 42.80, "spatialReference": {"wkid": 4326 } });
                map.centerAndZoom(point,8);
            });

            stlayer = new ArcGISDynamicMapServiceLayer(mapServer.stlayer);
            map.addLayer(stlayer,2);

            var HCimageLyr = new ArcGISDynamicMapServiceLayer("http://202.111.178.10:61236/arcgis/rest/services/ZCBJ/zcbj/MapServer");
            map.addLayer(HCimageLyr,1);

            legend = new Legend({
                map: map,
                layerInfos: [
                    {
                        layer: stlayer,
                        title: "口岸周边地图图例"
                    }]
            }, "GH-map-ex");

            legend.startup();

            stlayer.on("load",function(){
                var layerString = '';
                var bLayers = stlayer.layerInfos;
                for (var i = 0; i < bLayers.length; i++) {
                    var currentSubLayer = bLayers[i];
                    //if(currentSubLayer.parentLayerId == 0){
                    if(currentSubLayer.parentLayerId != 0){
                        layerString += '<input type="checkbox" id="'+ currentSubLayer.id +'" title="'+ currentSubLayer.name +'" lay-skin="primary"'+ (currentSubLayer.defaultVisibility ? " CHECKED " : "")+'><br>';
                    }
                }
                document.getElementById("GH-map-layer").innerHTML = '<div class="layui-form">' + layerString + '</div>';
                startTC();
            });
        });

        function startTC(){
            layui.use('form', function(){
                var form = layui.form;
                form.on('checkbox', function(data){
                    var checkedId = [];
                    var checkedLayer = $(".layui-form-checked");
                    for (var i = 0; i < checkedLayer.length; i++) {
                        checkedId.push(checkedLayer[i].previousSibling.id);
                    }
                    stlayer.setVisibleLayers(checkedId);
                    legend.refresh();
                });
            });
        }

        //打开文件管理
        var openFile =  function () {
            window.open("1-file/filelist.html");
        }
        //打开图片管理
        var openPic =  function () {
            window.open("1-file/piclist.html");
        }
        //打开视频管理
        var openVideo =  function () {
            window.open("1-file/videolist.html");
        }
        //控制图例
        var initExam = false;
        var openExam =  function () {
            var exDom = document.getElementById("GH-map-ex");
            if(initExam){
                exDom.style.display="none";
                initExam = false;
            }else{
                exDom.style.display="block";
                initExam = true;
            }
        }


    </script>
</head>
<body layadmin-themealias="default">
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md8">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">

                    <div class="layui-card" style="margin-bottom: 0">
                        <div class="layui-card-header">
                            规划地图
                            <a href="javascript:;" class="layui-a-tips" style="float:right;color:lightblue;" onclick="openExam();">(显示/隐藏图例)</a>
                        </div>
                        <div class="layui-card-body">
                            <div id="map" style="width: 100%;">
                                <div id="GH-map-layer"></div>
                                <div id="GH-map-ex"></div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            沙坨子口岸概况
                        </div>
                        <div class="layui-card-body layui-text layadmin-text">
                            <div id="jieshao" style="width: 100%; overflow: auto">
                                <p>沙坨子口岸位于珲春市区西部，东经130度12分，北纬43度12分，距珲春市区11公里，对面是朝鲜赛别尔口岸。</p>
                                <p>沙坨子口岸是传统的民间贸易口岸，改革开放前，主要为双方边民探亲往来服务。</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            沙坨子口岸概况视频
                            <a href="javascript:;" class="layui-a-tips" onclick="openVideo();">更多</a>
                        </div>
                        <div class="layui-card-body">
                            <div id="youku" style="width: 100%;">
                                <!--<iframe height=100% width=100% src='http://player.youku.com/embed/XMzUwOTQxNDIzNg==' frameborder=0 'allowfullscreen'></iframe>-->
                                <iframe width="520" height="300" src='http://player.youku.com/embed/XOTUyNjE5MDQ0' frameborder=0 'allowfullscreen'></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-tab layui-tab-brief layadmin-latestData" lay-filter="fileManage">
                    <a id="moreFile" class="more-file" onclick="openFile()" style="display: none;">更多</a>
                    <ul class="layui-tab-title">
                        <li class="layui-this">热点新闻</li>
                        <li lay-id="111" >文档资料</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show layui-text layadmin-text">
                            <ul>
                                <li><a href="javascript:;" target="_blank">沙坨子口岸群体性事件安全宣传</a></li>
                                <li><a href="javascript:;" target="_blank">沙坨子口岸群体性事件安全宣传</a></li>
                                <li><a href="javascript:;" target="_blank">沙坨子口岸群体性事件安全宣传</a></li>
                                <li><a href="javascript:;" target="_blank">沙坨子口岸群体性事件安全宣传</a></li>
                                <li><a href="javascript:;" target="_blank">沙坨子口岸群体性事件安全宣传</a></li>
                                <li><a href="javascript:;" target="_blank">沙坨子口岸群体性事件安全宣传</a></li>
                                <li><a href="javascript:;" target="_blank">沙坨子口岸群体性事件安全宣传</a></li>
                            </ul>
                        </div>
                        <div class="layui-tab-item layui-text layadmin-text" id="ul-filelist">
                            <ul>
                                <li><a href="javascript:;" target="_blank">沙坨子口岸状况A</a></li>
                                <li><a href="javascript:;" target="_blank">沙坨子口岸状况B</a></li>
                                <li><a href="javascript:;" target="_blank">沙坨子口岸状况C</a></li>
                                <li><a href="javascript:;" target="_blank">沙坨子口岸状况D</a></li>
                                <li><a href="javascript:;" target="_blank">沙坨子口岸状况E</a></li>
                                <li><a href="javascript:;" target="_blank">沙坨子口岸状况F</a></li>
                                <li><a href="javascript:;" target="_blank">沙坨子口岸状况G</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!--
                <div class="layui-card-header">
                    热点新闻
                    <a href="javascript:;" class="layui-a-tips">更多</a>
                </div>
                <div class="layui-card-body layui-text layadmin-text">
                    <ul>
                        <li><a href="javascript:;" target="_blank">松原查干湖机场开启运营新模式</a></li>
                        <li><a href="javascript:;" target="_blank">群众办事百项堵点疏解行动</a></li>
                        <li><a href="javascript:;" target="_blank">全省旅游产业推进大会</a></li>
                        <li><a href="javascript:;" target="_blank">开创旅游业发展新局面</a></li>
                        <li><a href="javascript:;" target="_blank">中国旅游日·优质旅游环保行</a></li>
                        <li><a href="javascript:;" target="_blank">2018“中国-欧盟旅游年”灯桥点亮活动拉开帷幕</a></li>
                        <li><a href="javascript:;" target="_blank">我省发布乡村旅游“召集令”</a></li>
                    </ul>
                </div>
                -->
            </div>
            <div class="layui-card">
                <div class="layui-tab layui-tab-brief layadmin-latestData">
                    <a class="more-file" onclick="openPic()">更多</a>
                    <ul class="layui-tab-title">
                        <li class="layui-this">口岸概况</li>
                        <li class="">服务指南</li>
                        <li class="">安全提示</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div style="width: 100%;">
                                <div class="layui-carousel" id="lb1">
                                    <div carousel-item>
                                        <div><img src="images/kouan/ShatuoziPort-1.jpg" class="lb"></div>
                                        <div><img src="images/kouan/ShatuoziPort-2.jpg" class="lb"></div>
                                        <div><img src="images/kouan/ShatuoziPort-3.jpg" class="lb"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-tab-item">
                            <div style="width: 100%;">
                                <div class="layui-carousel" id="lb2">
                                    <div carousel-item>
                                        <div><img src="images/kouan/ShatuoziPort-1.jpg" class="lb"></div>
                                        <div><img src="images/kouan/ShatuoziPort-2.jpg" class="lb"></div>
                                        <div><img src="images/kouan/ShatuoziPort-3.jpg" class="lb"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-tab-item">
                            <div style="width: 100%;">
                                <div class="layui-carousel" id="lb3">
                                    <div carousel-item>
                                        <div><img src="images/kouan/ShatuoziPort-1.jpg" class="lb"></div>
                                        <div><img src="images/kouan/ShatuoziPort-2.jpg" class="lb"></div>
                                        <div><img src="images/kouan/ShatuoziPort-3.jpg" class="lb"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--<div class="layui-tab-item">
                            <div style="width: 100%; height: 350px;">
                                <div class="layui-carousel" id="lb4">
                                    <div carousel-item>
                                        <div><img src="images/4成吉思汗召/成吉思汗召1.jpg" class="lb"></div>
                                        <div><img src="images/4成吉思汗召/成吉思汗召2.jpg" class="lb"></div>
                                        <div><img src="images/4成吉思汗召/成吉思汗召3.jpg" class="lb"></div>
                                        <div><img src="images/4成吉思汗召/成吉思汗召4.jpg" class="lb"></div>
                                        <div><img src="images/4成吉思汗召/成吉思汗召5.jpg" class="lb"></div>
                                    </div>
                                </div>
                            </div>
                        </div>-->
                    </div>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">
                    天气情况
                </div>
                <div class="layui-card-body">
                    <iframe width="350" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&icon=5&py=hunchun&num=2&site=12"></iframe>
                </div>
                <div class="layui-card-body">
                    <iframe width="350" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&icon=5&py=yanji&num=2&site=12"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    //图片轮播切换
    var pad = {};

    $(document).ready(function(){
        var width = $('#youku')[0].clientWidth;
        console.log(width);
        $('#youku').css('height', width*0.6);
        $('#jieshao').css('height', width*0.6);
        $('#map').css('height', width);

        layui.use('carousel', function(){
            var carousel = layui.carousel;
            pad.r1 = carousel.render({
                elem: '#lb1'
                ,width: '100%' //设置容器宽度
                ,height: width*0.6
                ,arrow: 'always' //始终显示箭头
            });
            pad.r2 = carousel.render({
                elem: '#lb2'
                ,width: '100%'
                ,height: width*0.6
                ,arrow: 'always'
            });
            pad.r3 = carousel.render({
                elem: '#lb3'
                ,width: '100%'
                ,height: width*0.6
                ,arrow: 'always'
            });
        });
        //文件列表获取
        $.get("../showFiles", function(evt) {
            if (evt != null) {
                var fileHTML = "<ul>";
                for(var i = 0; i < 7; i++){
                    fileHTML += '<li><a href="/'+ evt[i].link +'" target="_blank">'+evt[i].name+'</a></li>';
                }
                fileHTML += "</ul>";
                document.getElementById("ul-filelist").innerHTML = fileHTML;
            }
        });
    });


    function changeSize() {
        var width = $('#youku')[0].clientWidth;
        console.log(width);
        $('#youku').css('height', width*0.6);
        $('#jieshao').css('height', width*0.6);
        $('#map').css('height', width);
        //建造实例
        pad.r1.reload({
            elem: '#lb1'
            ,width: '100%' //设置容器宽度
            ,height: width*0.6
            ,arrow: 'always' //始终显示箭头
        });
        pad.r2.reload({
            elem: '#lb2'
            ,width: '100%'
            ,height: width*0.6
            ,arrow: 'always'
        });
        pad.r3.reload({
            elem: '#lb3'
            ,width: '100%'
            ,height: width*0.6
            ,arrow: 'always'
        });
    }

    $(window).resize(function(evt) {
        console.log(evt);
        changeSize();
    });

    //tab切换
    layui.use('element', function(){
        var element = layui.element;
        //监听Tab切换，以改变地址hash值
        element.on('tab(fileManage)', function(){
            if(this.getAttribute('lay-id') == "111"){
                document.getElementById("moreFile").style.display="block";
            }else{
                document.getElementById("moreFile").style.display="none";
            }
        });
        //…
    });
</script>
<style id="LAY_layadmin_theme">.layui-side-menu,.layadmin-pagetabs .layui-tab-title li:after,.layadmin-pagetabs .layui-tab-title li.layui-this:after,.layui-layer-admin .layui-layer-title,.layadmin-side-shrink .layui-side-menu .layui-nav>.layui-nav-item>.layui-nav-child{background-color:#20222A !important;}.layui-nav-tree .layui-this,.layui-nav-tree .layui-this>a,.layui-nav-tree .layui-nav-child dd.layui-this,.layui-nav-tree .layui-nav-child dd.layui-this a{background-color:#009688 !important;}.layui-layout-admin .layui-logo{background-color:#20222A !important;}

.lb{width: 100%; height: 100%}
.layui-tab{margin: 0}
</style>
</body>
</html>